<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header">
          <div class="left">
            <h1>叩丁狼电商运营平台</h1>
            <el-icon @click="isCollapse = !isCollapse"><Menu /></el-icon>
          </div>
          <div class="right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ useStore.username
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="index">首页</el-dropdown-item>
                  <el-dropdown-item command="login">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="fit-content">
          <div class="lefts">
            <el-row>
              <el-col :span="12">
                <el-menu
                  active-text-color="blue"
                  background-color="#304156"
                  class="el-menu-vertical-demo"
                  :default-active="defaultactive"
                  text-color="#fff"
                  unique-opened
                  router
                  :collapse="isCollapse"
                >
                  <el-menu-item :index="'/index'">
                    <i class="iconfont homepage"></i>
                    <span>首页</span>
                  </el-menu-item>

                  <el-sub-menu
                    :index="index + ''"
                    v-for="(item, index) in menuRoutes"
                    :key="item.id"
                  >
                    <template #title>
                      <i class="iconfont" :class="item.icon"></i>
                      <span>{{ item.title }}</span>
                    </template>
                    <template v-for="citem in item.children" :key="citem.id">
                      <el-menu-item
                        :index="'/' + item.name + '/' + citem.name"
                        v-if="!citem.hidden"
                      >
                        <i class="iconfont" :class="citem.icon"></i>
                        {{ citem.title }}</el-menu-item
                      >
                    </template>
                  </el-sub-menu>
                </el-menu>
              </el-col>
            </el-row>
          </div></el-aside
        >
        <el-main>
          <!-- <Crumbs title="首页"></Crumbs> -->
          <div>
            <router-view>
            </router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Crumbs from "@/components/Crumbs/index.vue";
import { useUserStore } from "@/store/module/user";
import { ElMessage } from "element-plus";
import { ArrowDown, Menu } from "@element-plus/icons-vue";
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { loginout } from "@/common";

// 左侧
const useStore = useUserStore();
const route = useRoute();
const router = useRouter();

const menuRoutes = computed(() => {
  return useStore.getMenusRoutes;
});

const defaultactive = ref("/index"); //高亮
watch(
  () => route.path,
  (newVal) => {
    console.log("watch");
    defaultactive.value = newVal;
  },
  {
    immediate: true,
  }
);

// 头部

//折叠菜单
const isCollapse = ref(false);

//下拉框
const handleCommand = (command: string | number | object) => {
  if (command == "index") {
    //去首页
    router.push("/index");
  } else if (command == "login") {
    //退出登录
    //调用退出登录方法 暂时不写
    //删除token
    // localStorage.removeItem("token");
    // //清除仓库数据
    // useStore.updateMenus([]);
    // useStore.username = "";
    // //清除动态路由getRoutes()
    // const allroutes = router.getRoutes();
    // console.log(999, allroutes);
    // allroutes.forEach((item) => {
    //   if (item.name != "login" && item.name) {
    //     router.removeRoute(item.name);
    //   }
    // });
    //提示退出成功
    loginout();
    ElMessage.success("退出成功");
    //跳转到login
    // router.push("/login");
  }
};
</script>

<style lang="less" scoped>
.el-header {
  padding: 0;
  --el-header-height: 80px;
}
.el-main {
  padding: 0;
}
.lefts {
  background: #304156;
  height: calc(100vh - 80px);
  :deep(.el-col) {
    width: 100%;
    flex: 1;
    max-width: 100%;
  }
}
.header {
  display: flex;
  height: 100%;
  color: #fff;
  background: #409eff;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .left {
    display: flex;
    align-items: center;
    h1 {
      font-size: 25px;
      margin-right: 20px;
    }
    :deep(.el-icon svg) {
      width: 5em;
      height: 5em;
    }
  }
}
.el-aside {
  background: #304156;
}

:deep(.el-dropdown) {
  color: #fff;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* 白线的处理 */
:deep(.el-menu) {
  border-right: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
